/**
 * 展示组件：只负责UI，不直接根redux接头
 * 添加任务：用户输入人物名后，获取输入值，添加待办事项
 */
import React from 'react';

function AddTodo(props) {
  // console.log('获取修改store的方法：', props)
  // 修改store的方法
  const { add } = props;
  // input的DOM对象
  let inputRef;
  // 添加任务的事件处理函数
  let addTask = () => {
    // 1. 获取用户输入的待办事项的名字
    // console.log(inputRef)
    let val = inputRef.value.trim();
    // 边界判断
    if (val) {
      // 向store里边添加待办事项
      add(val);
      // 清空输入框的值
      inputRef.value = ''
    }
  }

  return (
    <div>
      <input ref={(ele) => inputRef = ele} type="text" /><button onClick={addTask} className="btn">添加</button>
    </div>
  );
}

export default AddTodo

